<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
      <hr>
       <router-link to="/detail/1">详情1</router-link>
       <router-link to="/detail/2">详情2</router-link>
       <router-link to="/detail/3">详情3</router-link>

    </nav>
    <hr>
     <!-- <transition 
      enter-active-class="animate__animated animate__fadeInLeft"
      leave-active-class="animate__animated animate__fadeOutRight"
    >
       <router-view/>
    </transition > -->
     <h3>默认视图</h3>
     <!--
      没有name属性默认路由视图 名字default
      在路由表中所有compoennt使用的组件都是 default
      -->
     <router-view/>
     <h3>aa视图</h3>
     <router-view name="aa"/>
     <h3>bb视图</h3>
     <router-view name="bb"/>
   
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>
